@use '_variables' as *;

// 渐显动画 fade-in
.fade-in-enter-active {
  transition: opacity 0.2s ease;
}

.fade-in-enter-from {
  opacity: 0;
}

// 渐显渐隐动画 fade
.fade-enter-active,
.fade-leave-active {
  transition: opacity $duration ease-in-out;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// 缩放动画
.zoom-enter-active,
.zoom-leave-active {
  transition: all $duration ease-in-out;
}

.zoom-enter-from,
.zoom-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

// 左侧抽屉动画
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform $duration ease-in-out;
}

.slide-left-enter-from,
.slide-left-leave-to {
  transform: translateX(-100%);
}

.slide-right-enter-from,
.slide-right-leave-to {
  transform: translateX(100%);
}

.slide-left-enter-to,
.slide-left-leave-from,
.slide-right-enter-to,
.slide-right-leave-from {
  transform: translateX(0);
}

// 列表 渐显渐隐动画
.list-enter-active,
.list-leave-active {
  transition: all 0.6s ease-in-out;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
}
